<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html {
            overflow: hidden;
        }
        body {
            position: absolute;
            margin: 0px;
            padding: 0px;
            background: #111;
            width: 100%;
            height: 100%;
        }
        #center {
            position: absolute;
            left: 50%;
            top:  50%;
        }
        #slider {
            position: absolute;
            width: 820px;
            height: 333px;
            left: -430px;
            top: -186px;
            overflow: hidden;
            background: #000;
            border: 20px solid #000;
        }
        #slider .slide {
            position: absolute;
            top: 0px;
            height: 333px;
            width: 500px;
            background: #000;
            overflow: hidden;
            border-left: #000 solid 1px;
            cursor: default;
        }
        #slider .title   {
            color: #F80;
            font-weight: bold;
            font-size: 1.2em;
            margin-right: 1.5em;
            text-decoration: none;
        }
        #slider .backgroundText {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 100%;
            background: #000;
            filter: alpha(opacity=40);
            opacity: 0.4;
        }
        #slider .text {
            position: absolute;
            top: 1%;
            top: 100%;
            color: #FFF;
            font-family: verdana, arial, Helvetica, sans-serif;
            font-size: 0.9em;
            text-align: justify;
            width: 470px;
            left: 10px;
        }
        #slider .diapo {
            position: absolute;
            filter: alpha(opacity=100);
            opacity: 1;
            visibility: hidden;
        }
    </style>

</head>
<body>
<div id="center">
    <div id="slider">
        <div class="slide">
            <img class="diapo" src="images/sf10.jpg" alt="">
            <div class="text">
                <span class="title">我为什么这么帅</span>
                就是这么帅,就是这么任性
            </div>
        </div>
        <div class="slide">
            <img class="diapo" src="images/sf15.jpg" alt="">
            <div class="text">
                <span class="title">标题</span>
                描述文字...
            </div>
        </div>
        <div class="slide">
            <img class="diapo" src="images/sf19.jpg" alt="">
            <div class="text">
                <span class="title">标题</span>
                描述文字...
            </div>
        </div>
        <div class="slide">
            <img class="diapo" src="images/sf24.jpg" alt="">
            <div class="text">
                <span class="title">标题</span>
                描述文字...
            </div>
        </div>
        <div class="slide">
            <img class="diapo" src="images/sf41.jpg" alt="">
            <div class="text">
                <span class="title">标题</span>
                描述文字...
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="js/slider.js"></script>
<script>
    slider.init();
</script>
</body>
</html>